<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>组件</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .head{
            margin: 30px 20px; 
            color: #333;
        }
        .head .title{
            font-size: 20px;
            font-weight: 600;
        }
        .head .introduce{
            font-size: 14px;
            color: #666;
        }

        .list{
            margin: 20px;
        }
        .list ul li{
            list-style: none;
            height: 38px;
            line-height: 38px;
            background: #F7F8FA;
            margin: 10px 0;
            padding: 0px 10px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
        }
        .list ul li:hover{
            background: #EEF0F4
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="title">JQmodule</div>
        <div class="introduce">一个基于 jQuery 的框架，集成了各种用户界面插件。</div>
    </div>

    <div class="list">
        <ul>
            <li>Dialog 弹出框</li>
            <li>CardBar 卡片栏</li>
            <li>Nav 导航栏</li>
            <li>Style 内置样式</li>
            <li>NoticeBar 通知栏</li>
            <li>icon 图标栏</li>
            <li>Timeline 时间轴</li>
            <li>Steps 步骤条</li>
            <li>Notify 消息通知</li>
            <li>Time 时间</li>
            <li>Popup 底部弹出选项卡</li>
        </ul>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(".list ul").on('click','li',function(e){
            let navText = e.target.innerText.replace(/[^a-zA-Z]/g,'')
            location.href = "module/" + navText + ".html" 
            console.log(navText)
        })
    </script>
</body>
</html>